<template>
<view class="device">
	<view style="width: 100%; height: 660upx; overflow: hidden; position: relative;">
		<image src="/static/device.png" style="width: 100%; height: 868upx; position: absolute; left: 0; top: -110upx;"></image>		
	</view>
	<view style="width: 100%; height: auto; min-height: calc( 100% - 630upx ); background: #fff; border-radius: 30upx 30upx 0upx 0upx; position: relative;
		box-shadow: 0upx 0upx 17upx 1upx rgba(172, 172, 172, 0.22); margin-top: -30upx; box-sizing: border-box; padding: 30upx;" v-if="info">
		<!-- <view style="font-size: 32upx; color: #000000;">计费规则</view> -->
		<view style="font-size: 32upx; color: #000000;">
			<text>{{ info.shopName || '暂无' }}</text>
			<!-- <text style="float: right; color: #ef7738;">{{info.chargeMoney}}</text> -->
		</view>
		<view style="font-size: 24upx; color: #58585a; line-height: 1.5; margin-top: 16upx;">计费规则：</view>
		<view style="font-size: 24upx; color: #ef7738; line-height: 1.5; margin-top: 16upx;" v-if="isFreeUser">今日剩余免费时长{{ todayFreeHour }}小时</view>
		<view style="font-size: 24upx; color: #ef7738; line-height: 1.5; margin-top: 16upx;">{{ info.chargeMoney }}</view>
		<view style="font-size: 24upx; color: #58585a; line-height: 1.5;">借租{{info.freeTime}}分钟内免费，日封顶{{info.highest}}元，总封顶{{info.highestSum}}元</view>
		<view style="font-size: 24upx; color: #58585a; line-height: 1.5;">押金{{info.highestSum}}元，支持免押服务</view>
		<view style="width: 100%; height: 2upx; background: #cdcdcd; margin-top: 20upx;"></view>
		<view style="font-size: 32upx; color: #000000; line-height: 1.5; margin-top: 14upx;">适配接口</view>
		<image src="/static/devicetype.png" style="width: 100%; height: 92upx; margin-top: 20upx;"></image>
		<view v-if="!ifYajin" style="width: 100%%; height: 100upx; background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(#000000, #000000);
			box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 50upx; color: #fff; text-align: center; display: flex; flex-direction: column;
			justify-content: space-around; align-items: center; margin-top: 20upx;" @click="querenzujie">
			<view style="font-size: 36upx;">免押金租借</view>
			<!-- <view style="font-size: 22upx; margin-bottom: 10upx;">(微信支付分550以上有机会)</view> -->
		</view>
		<view v-else style="width: 100%%; height: 100upx; background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(#000000, #000000);
			box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 50upx; color: #fff; text-align: center; display: flex; flex-direction: column;
			justify-content: space-around; align-items: center; margin-top: 20upx;" @click="querenzujie">
			<view style="font-size: 36upx;">确认租借</view>
		</view>
		<view v-if="!ifYajin" style="width: 100%; height: 90upx; line-height: 90upx; text-align: center; margin-top: 20upx; font-size: 30upx;">	
			<view style="height: 30upx; display: flex; flex-direction: row; justify-content: center; 
				align-items: center; transform: scale(1.2);">
				<image src="../../static/xinyong.png" style="height: 100%; width: 145upx;"></image>
				<view style="height: 24upx; width: 1upx; background: #666; opacity: 0.6; margin: 0 7upx;"></view>
				<view style="font-size: 22upx; color: #666;">550分及以上信用优享</view>
			</view>
			<checkbox-group @change="changeCheck" style="display: inline-block;">
				<checkbox value="check" :checked="true"/>
			</checkbox-group>
			<text>勾选同意</text>
			<text @click="weituoshu" style="marginsleft: 10upx; color: #04BE02;">《委托扣款授权书》</text>
		</view>
	</view>
<!-- 	<view class="infoBlank">
		<view style="width: 100%; height: 100%; position: relative;">
			<view style="height: 60upx;">
				<view style="font-weight: 600; position: absolute; left: 0; top: 0; font-size: 36upx;">{{ info.shopName || '暂无' }}</view>
				<view style="font-weight: 600; position: absolute; right: 0; top: 0;">
				</view>
			</view>		
			<view style="line-height: 2; margin-top: 30upx; color: #999; font-size: 36upx; color: #2867CE;">{{info.chargeMoney}}</view>
			<view style="line-height: 2; color: #999; font-size: 26upx; color: #62CC3F;">借租{{info.freeTime}}分钟内免费，不足1小时按1小时计费，</view>
			<view style="line-height: 2; color: #999; font-size: 26upx; color: #62CC3F;">日封顶{{info.highest}}元，总封顶{{info.highestSum}}元，</view>
			<view style="line-height: 2; color: #999; font-size: 26upx; color: #62CC3F;">押金{{info.highestSum}}元，支持免押服务。</view>
		</view>
	</view>
	<view v-if="!ifYajin" @click="querenzujie" class="mianyaBtn">
		<view style="font-size: 44upx; line-height: 60upx;">免押金租借</view>
		<view style="font-size: 30upx; line-height: 40upx;">（微信支付分550及以上有机会）</view>
	</view>
	<view v-else @click="querenzujie" style="width: 80%; height: 90upx; line-height: 90upx; border-radius: 15upx; background: #2867CE; color: #fff; text-align: center; margin: 0 auto;">确认租借</view>
	<view v-if="!ifYajin" style="width: 100%; height: 90upx; line-height: 90upx; text-align: center; margin-top: 20upx; font-size: 30upx;">		
		<checkbox-group @change="changeCheck" style="display: inline-block;">
			<checkbox value="check" :checked="true"/>
		</checkbox-group>
		<text>勾选同意</text>
		<text @click="weituoshu" style="marginsleft: 10upx; color: #07c160;">《委托扣款授权书》</text>
	</view>	 -->
	
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			info: null,
			shebeiId: '',
			ifYajin: false,
			check: true,
			interstitialAd: null,
			isFreeUser: false,
			todayFreeHour: 0
		}
	},
	methods: {
		querenzujie(){
			// wx.requestSubscribeMessage({
			// 	tmplIds: [ 'dcslc53k0eUu_sDiYId30Ba-xiUCvl5_Smuu2N-1AmQ', 'sTEk4lBOcbWffJB6BVxYrM5ceW5YJZ780-NGcuBkDjw' ],
			// 	success: (res) => {
					uni.showLoading({ title: '加载中' });
					if( this.ifYajin ) {				
						this.yajinZujie();
					}else{
						if( this.check ){					
							this.mianyaZujie();
						}else{		
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '您未勾选授权书，不能享受免押金服务，是否前往缴纳押金？',
								success: (res) => {
									if ( res.confirm ) { uni.navigateTo({ url: 'yajin' }); }
								}
							});	
						}		
					}		
			// 	}
			// });
			
		},
		weituoshu() {
			uni.navigateTo({ url: 'shouquanshu' });
		},
		yajinZujie() {
			http.request({
				url: `borrowV2?id=${this.shebeiId}`,
				method: 'post',
				success: (res)=>{					
					uni.hideLoading();
					uni.showModal({ 
						title: '提示', content: '租借成功', 
						showCancel: false,
						complete: () => {
							uni.navigateBack({ delta: 1 });
						}
					});
				},
				fail: (err)=>{			
					uni.hideLoading();
				}
			});	
		},
		mianyaZujie() {
			http.request({
				url: `wxV3/createrentbill?id=${this.shebeiId}`,
				method: 'post',
				success: (res) => {		
					uni.hideLoading();
					let data = res.dataList || {};
					if ( wx.openBusinessView ) {
						wx.openBusinessView({
							businessType: 'wxpayScoreUse',
							extraData: {
								mch_id: data.mch_id,
								package: data.package,
								timestamp: data.timestamp,
								nonce_str: data.nonce_str,
								sign_type: data.sign_type,
								sign: data.sign
							},
							envVersion: 'release',
							success(e) {
								console.log(e, '成功参数')
								if( e.extraData && e.extraData.query_id ){
									uni.showModal({ 
										title: '提示', content: '租借成功', 
										showCancel: false,
										complete: () => { uni.navigateBack({ delta: 1 }); }
									});
								}else{
									console.log('系统繁忙之后');
								}
							},
							fail(e) {
								uni.showModal({
									title: '提示',
									content: '免押金签约失败，前往缴纳押金？',
									success: (res) => { if ( res.confirm ) { uni.navigateTo({ url: 'yajin' }); } }
								});							
							}
						});
					} else {
						//引导用户升级微信版本 
						wx.showModal({
							title: '提示',
							content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
						});
					}
				},
				fail: (err)=>{		
					uni.hideLoading();	
					console.log(err);						
				}
			});	
		},
		changeCheck(e) {
			if (e.type == "change" && e.detail.value.length > 0) {
				this.check = true;
			} else {
				this.check = false;
			}
		},
		getFreetime(user) {
			http.request({
				url: `SpecialUserController/findUserFreeTime?sn=${ this.shebeiId }&userId=${ user.userId }`,
				method: 'get',
				success: (res) => {	
					console.log(res, 'resinfo')
					this.isFreeUser = res.dataList.isFreeUser;
					this.todayFreeHour = res.dataList.todayFreeHour;
				}
			});
		}
	},
	onLoad() {
		let user = uni.getStorageSync('user');
		if (wx.createInterstitialAd) {
			let timeG = uni.getStorageSync('timeG') || 0;
			let timeN = new Date().getTime();
			if( timeN - timeG > 24 * 60 * 60 * 1000 ) {				
				this.interstitialAd = wx.createInterstitialAd({ adUnitId: 'adunit-7d98ee4f11ad2239' })
				this.interstitialAd.onLoad(() => {})
				this.interstitialAd.onError((err) => {})
				this.interstitialAd.onClose(() => {})
			}
		}
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
		this.shebeiId = page.options.id;
		http.request({
			url: `borrow/myWallet?sn=${this.shebeiId}`,
			method: 'get',
			success: (res) => {		
				let info = res.dataList||{};
				if(info.deposit > 0 || info.creditSwitch != 'open') { this.ifYajin = true; }
			}
		});
		http.request({
			url: `chargerPlaEquipmentController/getSNEquipmentStatus?sn=${this.shebeiId}`,
			method: 'get',
			success: (res) => {		
				console.log(res, '设备信息');
				let info = res.dataList || {};
				if(info.ifOnline != 0) { 
					uni.showModal({
						title: '提示',
						content: '该设备正处于离线状态，请尝试其它设备或稍后再次尝试。',
						success: (res) => { uni.navigateBack({ delta: 1 }); }
					});
				} else if (info.ifBorrow != 0) { 
					uni.showModal({
						title: '提示',
						content: '该设备剩余充电宝电量不足，正在努力充电中，请尝试其它设备或稍后再次尝试。',
						success: (res) => { uni.navigateBack({ delta: 1 }); }
					});
				} else if( info.ifFault != 0 ) { 
					uni.showModal({
						title: '提示',
						content: '该设备处于故障中，请尝试其它设备。',
						success: (res) => { uni.navigateBack({ delta: 1 }); }
					});
				} else {					
					if ( this.interstitialAd ) {		
						let timeN = new Date().getTime();
						uni.setStorage({ key: 'timeG', data: timeN });
					  this.interstitialAd.show().catch((err) => { console.log(err, '广告加载失败的原因！'); });
					}
				}
				this.info=info;
			}
		});
		this.getFreetime(user);
	},
}
</script>

<style>
.device {
	height: 100vh;
	position: relative;
	background: #fff;
	overflow: auto;
}
</style>